<!doctype html>
<html lang="en" class="x-admin-sm">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>订单评价信息统计</title>
    <link rel="stylesheet" href="./assets/css/font.css" />
    <link rel="stylesheet" href="./assets/css/xadmin.css" />
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />

</head>

<body>
    <div id="app">
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="javascript:">管理系统</a>
                <a href="javascript:">订单评价信息</a>
                <a><cite>订单评价信息统计</cite></a>
              </span>
        </div>
        <div style="margin-top:8px;"></div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body layui-table-body layui-table-main">
                            <table class="layui-table">
                                <tr>
                                    <td style="text-align: center">
                                        <div class="text-center" id="chartmain" style="width: 99%; height: 600px;"></div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./assets/echart/echarts.min.js"></script>
    <script type="text/javascript" src="./assets/layui/layui.js"></script>
    <script type="text/javascript" src="./assets/js/axios.min.js"></script>
    <script type="text/javascript" src="./assets/js/vue.js"></script>
    <script type="text/javascript" src="./assets/js/jquery.min.js"></script>
    <script type="text/javascript">
        layui.use(['table', 'laydate'], function() {
            var table = layui.table;
            var laydate = layui.laydate;
            table.render({});
        })
        const vue = new Vue({ // 实例化Vue对象
            el: '#app', // 绑定作用域
            data: { //定义数据 用于vue的双向绑定
            },
            created() { // 生命周期相关的函数
                this.query();
            },
            methods: {
                // 关键字查询开始
                query: function() {
                    let _this = this;
                    var data = {
                        start: $('#start').val(),
                        end: $('#end').val(),
                    };
                    axios.post('http://localhost:8080/vue_gxhfztjxt/chart/chartTopic.action', data).then(result => {
                        let val = result.data.count.replace("[", "").replace("]", "").replace("{", "").replace("}", "").replaceAll("\"", "").split(",");
                        let name = result.data.names.replace("[", "").replace("]", "").replace("{", "").replace("}", "").replaceAll("\"", "").split(",");
                        let arrNum = [];
                        for (var i = 0; i < val.length; i++) {
                            arrNum.push({
                                "value": val[i],
                                "name": name[i].replace('"', "").replace('"', "")
                            });
                        }
                        var option = {
                            title: {
                                text: '用户评价统计',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                bottom: 10,
                                left: 'center',
                                data: name
                            },
                            calculable: true,
                            series: [{
                                type: 'pie',
                                radius: '65%',
                                center: ['50%', '50%'],
                                selectedMode: 'single',
                                data: arrNum,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }]
                        };
                        // 初始化echarts实例
                        let myChart = echarts.init(document.getElementById('chartmain'));
                        // 使用制定的配置项和数据显示图表
                        myChart.setOption(option);
                    });
                },
                // 关键字查询结束
            },
        });
    </script>

</body>

</html>